import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Alert, Button, StyleSheet, Text, View, processColor } from 'react-native';
import { NativeEventEmitter, NativeModules, findNodeHandle, UIManager } from 'react-native';

import Circle from '../view/circle';
import ToastExample from '../module/ToastExample.js';

export default class HelloWorld extends React.Component {
    render() {
        return (
            <View>
                <Text>Hello, World</Text>
                <Button title={'我是按钮'} onPress={() => {
                    // Alert.alert("title","message")
                }}/>

                <Circle
                    ref="circleView"
                    style={{width: 100, height: 100}}
                    color={processColor('#ff0000')}
                    radius={50}
                />
            </View>
        );
    }

    componentDidMount() {
        console.log('componentDidMount');
        // avaScript 模块可以通过使用NativeEventEmitter模块来监听事件：
        const eventEmitter = new NativeEventEmitter(NativeModules.CircleManager);
        eventEmitter.addListener('EventReminder', (event) => {
            console.log('收到事件');
            console.log(event.key); // "someValue"

            // 《ReactNative之原生UI导出方法》https://yangguang1029.github.io/2018/09/27/rn-native-view-method/
            let circleView = UIManager.getViewManagerConfig('MCircle');
            UIManager.dispatchViewManagerCommand(
                findNodeHandle(this.refs.circleView),
                circleView.Commands.commend0,
                ['a', 'b', 'c'],
            );
        });
    }
}
